<template>
  <div>
    <el-breadcrumb separator="/"> <!--面包屑never-->
      <el-breadcrumb-item :to="{ path: '/TestProductTemplateConfiguration'}"><i class="el-icon-s-home" style="margin-right: 15px;font-size: 16px"></i>试品模板</el-breadcrumb-item>
    </el-breadcrumb>
    <div class="info">
      <el-card shadow="always" class="cardPosition"><!--统计、搜索、新建方案card-->
      <div slot="header" class="clearfix">
        <el-row>
          <el-col :span="7" :offset="4" style="margin-top: 10px; float: left;margin-left: 30px;">
            <el-input placeholder="请输入模板名称进行搜索" clearable v-model="searchContent" @input="getSearchTableData" size="small"></el-input>
          </el-col>
          <!-- <el-col :span="7" :offset="4" style="margin-top: 10px; float: left;margin-left: 30px;">
            <el-input placeholder="请输入试品类型进行搜索" clearable v-model="prodTypeSearch" @input="getProdTypeSearch" size="small"></el-input>
          </el-col>
          <el-col :span="7" :offset="4" style="margin-top: 10px; float: left;margin-left: 30px;">
            <el-input placeholder="请输入试品名称进行搜索" clearable v-model="prodNameSearch" @input="getProdNameSearch" size="small"></el-input>
          </el-col> -->
        </el-row>
      </div>
        <div>
          <el-button type="text" class="global_add" :disabled="btnList.add" @click="toEditOrNewTestProdTemplate" style="float: right; margin-bottom: 10px" size="small">+&nbsp;新增模板</el-button>
        </div>
        <el-table v-loading="dataLoading" stripe :data="prodTemplateTableData.slice((currentPage-1)*pagesize,currentPage*pagesize)" style="width: 100%; margin-bottom: 10px;">
          <el-table-column property="tplt_name" label="模板名称" show-overflow-tooltip></el-table-column>
          <!-- <el-table-column property="pk_ch_name" label="试品类型" show-overflow-tooltip></el-table-column>
          <el-table-column property="prod_name" label="试品名称" show-overflow-tooltip></el-table-column> -->
          <el-table-column property="user_name" label="创建人" show-overflow-tooltip></el-table-column>
          <el-table-column property="tplt_date" label="创建时间" show-overflow-tooltip></el-table-column>
          <el-table-column property="operation" label="操作" align="center" width="350">
            <template slot-scope="scope">
              <el-button class="global_edit" type="text" :disabled="btnList.edit" @click="toEditor(scope.$index, scope.row)">编辑</el-button>
              <el-button class="global_edit" type="text" :disabled="btnList.edit" @click="copyConfirm(scope.$index, scope.row)">复制</el-button>
              <el-button class="global_delete" type="text" :disabled="btnList.delete" @click="deleteConfirm(scope.$index, scope.row)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          style="float: right; margin-bottom: 10px;"
          background
          :page-size="pagesize"
          :current-page.sync="currentPage"
          layout="prev, pager, next"
          :total="prodTemplateTableData.length">
        </el-pagination>
      </el-card>
    </div>
  </div>
</template>
<script>
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
// 引入需要用到的第三方nodejs库，如日期计算等
// 需要先通过npm安装第三方组件包，然后在代码中使用
// npm install xxx 
//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
import moment from 'moment';
import sessionStorage from '../../public/storage.js';
export default {
  data() {
    return {
      prodId:'',
      dataLoading: false,
      showPagination: true,     //分页显示
      currentPage: 1,           //从第几页开始显示
      pagesize: 10,              //每页多少行数据
      numberOfTestPlan: null,   //测试方案数量
      numberOfExecutions: null, //执行次数
      searchContent: '',        //模板名称搜索框
      prodTypeSearch:'',//试品类型搜索框
      prodNameSearch:'',//试品名称搜索框
      prodTemplateTableData: [],     //试品模板表数据 
      prodTemplateTableDataCopy: [], //试品模板表数据用于搜索筛选
      allprodFrom : [],//存放所有基本信息
      menu_id: 18,//页面id
      btnList: {//按钮权限
        add : false,
        edit : false,
        delete : false
      },
    };
  },
  methods: {
    //模板名称搜索框事件
    getSearchTableData(){
      if (this.searchContent === '') {
        this.prodTemplateTableData = this.prodTemplateTableDataCopy;
        this.getProdTypeSearch();
        this.getProdNameSearch();
      } else {
        let option = [];
        for (let i = 0; i < this.prodTemplateTableData.length; i++) {
          let inKind = this.prodTemplateTableData[i].tplt_name;
          if (inKind.indexOf(this.searchContent) !== -1) {
            option.push(this.prodTemplateTableData[i]);
          }
        }
        this.prodTemplateTableData = option;
      }
    },
    //试品类型搜索框事件
    getProdTypeSearch(){
      if (this.prodTypeSearch === '') {
        this.prodTemplateTableData = this.prodTemplateTableDataCopy;
        this.getSearchTableData();
        this.getProdNameSearch();
      } else {
        let option = [];
        for (let i = 0; i < this.prodTemplateTableData.length; i++) {
          let inKind = this.prodTemplateTableData[i].pk_ch_name;
          if (inKind.indexOf(this.prodTypeSearch) !== -1) {
            option.push(this.prodTemplateTableData[i]);
          }
        }
        this.prodTemplateTableData = option;
      }
    },
    //试品名称搜索框事件
    getProdNameSearch(){
      if (this.prodNameSearch === '') {
        this.prodTemplateTableData = this.prodTemplateTableDataCopy;
        this.getSearchTableData();
        this.getProdTypeSearch();
      } else {
        let option = [];
        for (let i = 0; i < this.prodTemplateTableData.length; i++) {
          let inKind = this.prodTemplateTableData[i].prod_name;
          if (inKind.indexOf(this.prodNameSearch) !== -1) {
            option.push(this.prodTemplateTableData[i]);
          }
        }
        this.prodTemplateTableData = option;
      }
    },
    
    //跳转至新建试品模板
    toEditOrNewTestProdTemplate(){
      this.$router.push({
        path:'/EditTestProdTemplate',
        query:{
          sign: 'new',
        }
      });
    },
     //跳转至试品模板编辑
    toEditor(index,row){
      this.$router.push({
          path:'/EditTestProdTemplate',
          query:{
            'sign': 'edit',
            prodFromName:{
              tpltId: row.tplt_id,
              prodId: row.prod_id,
              pkId: row.pk_id,
              tpltName: row.tplt_name,
            }
            
          }
      });
    },
    // 复制试品模板
    async copyConfirm(index, row){
      console.log(index, row);
      let ret = await this.$http.post("/testProdTemplate/copyTemplate",{template:row});
      // console.log('ret',ret);
      if (ret.code ===200){
        this.getList();
        this.$message.success('复制成功！')
      }
    },
    deleteConfirm(index, row) {
      this.$confirm("确定要永久删除？", "提示", {
        type: "warning",
      })
        .then(({ result }) => {
          if (!result) {
            this.deleteTemplate(index, row);
          }
        })
        .catch(() => {
          this.$message('已取消操作!')
        });
    },
    //删除试品模板
    async deleteTemplate(index,row){
      let params = {
        tpltId : row.tplt_id
      }
      let ret = await this.$http.delete("/testProdTemplate/deleteTemplate",{params,});
      if(ret.code === 200) {
        this.getList();
        this.$message.success('删除成功！')
      }
      if(ret.code === 403) {
        this.getList();
        this.$message.warning('此模板在使用，请勿删除!')
      }
    },
    // 获取试品模板配置列表
    async getList(){
      const ret = await this.$http.get("/testProdTemplate/getProdTemplate",{});
      this.prodTemplateTableData = ret.result;
      this.prodTemplateTableDataCopy = ret.result;
    },
    //控制权限方法
    async roleBtnList(role_id) {
      const {result} = await this.$http.get(`/getRoleBtnList?role_id=${role_id}&menu_id=${this.menu_id}`)
      this.roleBtnArr = result;
      this.roleBtnArr.forEach(item => {
          this.btnList[item.btn_code] = item.flag;
     });
    }
  },
  mounted () {
    this.getList();
    const role_id = JSON.parse(sessionStorage.getItem('userInfo')).role_id;
    if(role_id) {
      this.roleBtnList(role_id);
    }
  },
}
</script>
<style lang="scss" scoped>
@import "./TestProductTemplateConfiguration.scss";
</style>
